<template>
	<view class="addr">
		<view class="tx">
			地址信息
		</view>
		<u--form labelPosition="left" ref="uForm">
			<u-form-item prop="userInfo.name" ref="item1">
				<text>收货人：</text><u-input v-model="user.name" placeholder="名字"></u-input>
			</u-form-item>
			<u-form-item prop="userInfo.name" ref="item1">
				<text>手机号码：</text><u-input maxlength="11" v-model="user.phone" type="number" placeholder="手机号"></u-input>
			</u-form-item>
			<u-form-item prop="userInfo.name" ref="item1">
				<text>详细地址：</text><u--textarea v-model="user.addr" placeholder="小区楼栋/乡村名称"></u--textarea>
			</u-form-item>
			<view class="btn">
				<u-button @click="add()" type="error" shape="circle">保存</u-button>
			</view>
		</u--form>
	</view>
</template>

<script>
import { mapActions,mapState } from 'vuex';
	export default {
		data() {
			return {
				user:{
					id : 0,
					name : '',
					phone : '',
					addr : ''
				},
				rules: {
					name: {
							type: 'string',
							required: true,
							message: '请填写姓名',
							trigger: ['blur', 'change']
					},
					addr: {
							type: 'string',
							required: true,
							message: '请填写收货地址',
							trigger: ['blur', 'change']
					},
					phone: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		computed:{
			...mapState('addr',['addrs'])
		},
		methods: {
			...mapActions('addr',['actionAddrs','actionRemove']),
			add(){
				if(this.user.name == ''){
					uni.showToast({
						icon:'none',
						title:'名字不能为空'
					})
				}else if(this.user.phone == ''){
					uni.showToast({
						icon:'none',
						title:'手机号码不能为空'
					})
				}else if(this.user.addr == ''){
					uni.showToast({
						icon:'none',
						title:'地址不能为空'
					})
				}else if(this.user.name != '' && this.user.phone != '' && this.user.addr != ''){
					if(this.addrs.length != 0){
						this.user.id = this.addrs[this.addrs.length-1].id;
					}
					let k ={
						id : this.user.id += 1,
						name : this.user.name,
						phone : this.user.phone,
						addr : this.user.addr,
						isShow : false
					}
					this.actionAddrs(k);
					console.log(this.addrs);
					setTimeout(()=>{
						uni.showToast({
							title:'添加成功'
						})
					},200)
					this.user = {};
				}
			}
		}
	}
</script>

<style>
.addr{
	width: 100%;
}
.addr .tx{
	width: 94%;
	margin: 20px auto;
}
.u-form{
	width: 96%;
	margin: 10px auto;
	background-color: #fff;
	border-radius: 6px;
	padding-bottom: 20px;
}
.u-form .u-form-item{
	width: 96%;
	margin: 0 auto;
}
.u-form text{
	width: 25%;
	font-size: 14px;
	font-weight: bold;
}
.u-form .btn{
	width: 300px;
	margin-top: 30px;
	margin-left: 10%;
}
</style>
